import { createApp } from 'vue'
import pinia from './stores'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import './styles/index.scss'
import ElSvg from './components/SvgIcon/ElSvg'
import './permission'
import CategorySelector from './components/CategorySelector/index.vue'
import InputComp from './components/InputComp/index.vue'
import BulkOperation from './components/BulkOperation/index.vue'
import CommonCard from '@/views/home/components/TopView/components/CommonCard/index.vue'
import Draggable from '@/components/Draggable/index.vue'
import { useUserInfoStore } from './stores/userInfo'
import '@/mock'
const app = createApp(App)
const userInfoStore = useUserInfoStore();
app.component('CategorySelector', CategorySelector)
app.component('InputComp', InputComp)
app.component('BulkOperation', BulkOperation)
app.component('CommonCard', CommonCard)
app.component('Draggable', Draggable)

import { vueEcharts } from '@/plugins/echart'
app.use(vueEcharts)

ElSvg(app)

app.use(pinia)
  .use(router)
  .use(ElementPlus, {
    locale: zhCn,
  })
  .mount('#app')


app.directive('permissionBtn', (el, binding) => {
  if (!userInfoStore.userInfo.buttons.includes(binding.value)) {
    el.parentNode?.removeChild(el);
  }
})

